<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Glassmorphism | Magic Line Indicator 4</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
<h1 class="H">请点击左侧计算按钮</h1>
    <ul>
        <li><a href="../index.html"><ion-icon name="accessibility-outline"></ion-icon></a></li>
        <li class="bt"><a href="#"><ion-icon name="calculator-outline"></ion-icon></a></li>
        <li class="active"><a href="../chess/chessindex.html"><ion-icon name="apps-outline"></ion-icon></a></li>
        <li><a href="#"><ion-icon name="chatbubble-outline"></ion-icon></a></li>
        <div id="marker"></div>
    </ul> 
    <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
    <link rel="stylesheet" type="text/css" media="screen" href="http://ionicons.com/">
    <div id="cal">

    </div>
    <script>
        let marker = document.querySelector('#marker');
        let list = document.querySelectorAll('ul li');
        function moveIndicator(e){
            marker.style.top = e.offsetTop+'px';
            marker.style.width = e.offsetWidth+'px';
        }

        list.forEach(link => {
            link.addEventListener('mousemove', (e) => {
                moveIndicator(e.target);
            })
        })

        // add active class in hovered list item
       function activeLink(){
        list.forEach((item) =>
        item.classList.remove('active'));
        this.classList.add('active');
       }

       list.forEach((item) =>
       item.addEventListener('mouseover', activeLink));
    </script> 
    <script>
        let ebt =document.querySelector('.bt');
        ebt.onclick=function(){
    for (var i=1;i<=9;i++){
            var node=document.createElement("p");
            var str='';
            for(var j=1;j<=i;j++){
                str+=i+'x'+j+'='+i*j+' ';
                var textnode=document.createTextNode(str);
            }
            node.appendChild(textnode);
	        document.getElementById("cal").appendChild(node);
        }
    } 
    </script>

</body>
</html>